<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登陆正则验证</title>
		<style>
			.ok{
				color: white;
			}
			.error{
				color: red;
			}
		</style>
		<script type="text/javascript">
						function mingzi(){
				var count = document.getElementById("num1").value;
				var span = document.getElementById("colorname");
				var reg = /^\w{5,10}$/;
				var result = count.match(reg);
				if(result){
					span.className = "ok";
				}else{
					span.className = "error";
				}
				}
				function mima(){
				var count2 = document.getElementById("num2").value;
				var span1 = document.getElementById("colormima");
				var reg = /^\w{10,20}$/;
				var result2 = count2.match(reg);
				if(result2){
					span1.className = "ok";
				}else{
					span1.className = "error";
				}
				}
				
			
		</script>
	</head>
	<body>
		名字：<input type="text" onblur="mingzi()" id="num1"/>		<!--事件会在对象失去焦点时发生。-->
		<span id="colorname">5-10位字母，数字，下划线</span>
		<br/>
		密码：<input type="password" onblur="mima()" id="num2"/>
		<span id="colormima">10-20位数字，字母，下划线</span>
		<br />
		<button>登陆</button>
	</body>
</html>
